import React from 'react';
import {
    FlatList,
    View,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';
import {connect} from 'react-redux';
import actions from '../../action';
import FontAwesome from "react-native-vector-icons/FontAwesome";
import styles from './style/app';
import CardItem from './CardItem';
import DiaLog from '../../components/DiaLog';
import {Toast} from '../../components/Toast';
import {BankList} from '../../public/dao/daoDatas';
class CreditCard extends React.Component {
    constructor(props){
        super(props);
        this.storeName = 'CreditCardListDatas';
        this.state={
            typeName:'全部',
            bankList:BankList,
        }
    }
    componentDidMount(){
        this.props.getCreditCardList(this.storeName,{
            loantype:'choosecreditcard',
            category:'all'
        })
    }
    /**
     * 获取与当前页面有关的数据
     * @returns {*}
     * @private
     */
    _store() {
        const {creditcardList} = this.props;
        let store = creditcardList[this.storeName];
        if (!store) {
            store = {
                isLoading: false,
                projectModels: [],//要显示的数据
            }
        }
        return store;
    }
    // _touchCaoback = (value,name)=>{
    //     this.dialog.setModalVisible(false);
    //     this.setState({
    //         typeName:name
    //     })
    //     this.props.getCreditCardList(this.storeName,{
    //         loantype:'choosecreditcard',
    //         category:value
    //     })
    // }
    _renderHeader = ()=>{
        return <View>
            {/* <Image style={styles.topImg} 
            source={require('../../images/card/credit_card.jpg')}
            resizeMode={"contain"}/> */}
            <Text>待开发</Text>
            {/* <View style={styles.typeCard}> */}
                {/* <TouchableOpacity onPress={()=>{this.dialog.setModalVisible(true)}}>
                    <View style={styles.typeCard}>
                        <Text>{this.state.typeName}</Text>
                        <FontAwesome style={styles.FontAwesome} name={'caret-down'} size={26}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{Toast.show('暂时没有卡型分类')}}>
                    <View style={styles.typeCard}>
                        <Text>联名卡</Text>
                        <FontAwesome style={styles.FontAwesome} name={'caret-down'} size={26}/>
                    </View>
                </TouchableOpacity> */}
            {/* </View> */}
        </View>
    }
    render() {
        let store = this._store();
        return (
            <View style={styles.container}>
                <FlatList
                data={store.projectModels}
                renderItem={(info,i)=>(i==1?<CardItem infoDatas={info} key={i}/>:null)}
                keyExtractor={(item, index) => {
                    return index.toString()
                }}
                ListHeaderComponent={this._renderHeader}
                />
                <DiaLog
                    ref={dialog => this.dialog = dialog}
                    Datas={this.state.bankList}
                    touchCaoback={this._touchCaoback}/>
            </View>
        )
    }
}
const mapStateToProps = state =>({
    nav:state.nav,
    creditcardList:state.creditcardList
});
const mapDispatchToProps = dispatch => ({
    getCreditCardList:(storeName,data)=>dispatch(actions.getCreditCardList(storeName,data))
})
export default connect(mapStateToProps,mapDispatchToProps)(CreditCard);
